<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .box{
      height:500px;
      width:500px;
      background-color: darkcyan;
    }
    .middle{

      width:140px;
      height:140px;
      background-color: darkblue;
      /*设置块级元素水平居中*/
      /*1.必须设置宽度*/
      /*2.所有的margin设置为auto，使得左右边距进行平分*/
      /*text-align：center 只能设置行内块元素和行内元素居中*/
      margin:0 auto;
    }
  </style>
</head>
<body>
<div class="box">
  <div class="middle"></div>

</div>
</body>
</html>